<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="header">
        <span>线上热门搜索</span>
        <svg
          t="1684827882511"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2838"
          width="16"
          height="16"
        >
          <path
            d="M223.962372 607.897867c-52.980346 0-95.983874-43.003528-95.983874-95.983874s43.003528-95.983874 95.983874-95.983874 95.983874 43.003528 95.983874 95.983874S276.942718 607.897867 223.962372 607.897867z"
            fill="#575B66"
            p-id="2839"
          ></path>
          <path
            d="M511.913993 607.897867c-52.980346 0-95.983874-43.003528-95.983874-95.983874s43.003528-95.983874 95.983874-95.983874 95.983874 43.003528 95.983874 95.983874S564.894339 607.897867 511.913993 607.897867z"
            fill="#575B66"
            p-id="2840"
          ></path>
          <path
            d="M800.037628 607.897867c-52.980346 0-95.983874-43.003528-95.983874-95.983874s43.003528-95.983874 95.983874-95.983874 95.983874 43.003528 95.983874 95.983874S852.84596 607.897867 800.037628 607.897867z"
            fill="#575B66"
            p-id="2841"
          ></path>
        </svg>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="title">
              <span class="title">用户搜索数</span>
              <svg
                t="1684829080646"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4746"
                width="16"
                height="16"
              >
                <path
                  d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512S793.6 1024 512 1024zM512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z"
                  p-id="4747"
                  fill="#8a8a8a"
                ></path>
                <path
                  d="M469.333333 768c-17.066667 0-29.866667-8.533333-42.666667-21.333333-21.333333-29.866667-4.266667-72.533333 42.666667-187.733333 8.533333-17.066667 17.066667-38.4 25.6-55.466667-17.066667 12.8-42.666667 12.8-59.733333-4.266667-17.066667-17.066667-17.066667-42.666667 0-59.733333C443.733333 435.2 494.933333 384 554.666667 384c17.066667 0 29.866667 8.533333 42.666667 21.333333 21.333333 29.866667 4.266667 72.533333-42.666667 187.733333-8.533333 17.066667-17.066667 38.4-25.6 55.466667 17.066667-12.8 42.666667-12.8 59.733333 4.266667 17.066667 17.066667 17.066667 42.666667 0 59.733333C580.266667 716.8 529.066667 768 469.333333 768z"
                  p-id="4748"
                  fill="#8a8a8a"
                ></path>
                <path
                  d="M576 277.333333m-64 0a1.5 1.5 0 1 0 128 0 1.5 1.5 0 1 0-128 0Z"
                  p-id="4749"
                  fill="#8a8a8a"
                ></path>
                <path
                  d="M576 362.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333S622.933333 362.666667 576 362.666667zM576 234.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667 42.666667-17.066667 42.666667-42.666667S601.6 234.666667 576 234.666667z"
                  p-id="4750"
                  fill="#8a8a8a"
                ></path>
              </svg>
            </div>
            <div class="count margin">
              <span>42131</span>
              <span>17.1</span>
              <svg
                t="1684829665566"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="14427"
                width="16"
                height="16"
              >
                <path
                  d="M517.5 288L215.4 665.2c-13.2 16.5-0.7 40.3 20.9 39.7l625.3-17.8c21.5-0.6 48.7-32.9 34.6-48.6L557 286.8c-10.5-11.7-29.6-11.2-39.5 1.2z"
                  fill="#d81e06"
                  p-id="14428"
                ></path>
                <path
                  d="M877 707.5H153.2c-18.8 0-35.5-10.5-43.7-27.4-8.2-16.9-6-36.5 5.6-51.3L477 171.3c9.3-11.7 23.1-18.4 38.1-18.4 14.9 0 28.8 6.7 38.1 18.4l361.9 457.5c11.6 14.7 13.8 34.4 5.6 51.3s-24.9 27.4-43.7 27.4zM506.1 194.3L144.2 651.8c-4.1 5.1-2.3 10.2-1.3 12.2 0.9 2 3.9 6.5 10.4 6.5H877c6.5 0 9.5-4.6 10.4-6.5 0.9-2 2.7-7.1-1.3-12.2L524.2 194.3c-3-3.8-7-4.4-9.1-4.4-2.1 0-6 0.6-9 4.4z"
                  fill="#d81e06"
                  p-id="14429"
                ></path>
              </svg>
            </div>
            <lineCharts></lineCharts>
          </el-col>
          <el-col :span="12">
            <div class="title">
              <span class="title">人均搜索数</span>
              <svg
                t="1684829080646"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4746"
                width="16"
                height="16"
              >
                <path
                  d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512S793.6 1024 512 1024zM512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z"
                  p-id="4747"
                  fill="#8a8a8a"
                ></path>
                <path
                  d="M469.333333 768c-17.066667 0-29.866667-8.533333-42.666667-21.333333-21.333333-29.866667-4.266667-72.533333 42.666667-187.733333 8.533333-17.066667 17.066667-38.4 25.6-55.466667-17.066667 12.8-42.666667 12.8-59.733333-4.266667-17.066667-17.066667-17.066667-42.666667 0-59.733333C443.733333 435.2 494.933333 384 554.666667 384c17.066667 0 29.866667 8.533333 42.666667 21.333333 21.333333 29.866667 4.266667 72.533333-42.666667 187.733333-8.533333 17.066667-17.066667 38.4-25.6 55.466667 17.066667-12.8 42.666667-12.8 59.733333 4.266667 17.066667 17.066667 17.066667 42.666667 0 59.733333C580.266667 716.8 529.066667 768 469.333333 768z"
                  p-id="4748"
                  fill="#8a8a8a"
                ></path>
                <path
                  d="M576 277.333333m-64 0a1.5 1.5 0 1 0 128 0 1.5 1.5 0 1 0-128 0Z"
                  p-id="4749"
                  fill="#8a8a8a"
                ></path>
                <path
                  d="M576 362.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333S622.933333 362.666667 576 362.666667zM576 234.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667 42.666667-17.066667 42.666667-42.666667S601.6 234.666667 576 234.666667z"
                  p-id="4750"
                  fill="#8a8a8a"
                ></path>
              </svg>
            </div>
            <div class="count margin">
              <span>3.6</span>
              <span>27.1</span>
              <svg
                t="1684829757161"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="16577"
                width="16"
                height="16"
              >
                <path
                  d="M288.6 389.1H866c13 0-26.7 10.8-21 24 5.7 13.2-19.5 25.8-27.6 37.3L566.3 806.7c-6.4 9.1-16.1 14.4-26.4 14.4-10.4 0-49.8-1.4-56.3-10.5L262.2 450.4c-8.1-11.5-9.6-26.8-3.9-39.9s17.3-21.4 30.3-21.4z m-7.2 33.9"
                  fill="#25B195"
                  p-id="16578"
                ></path>
                <path
                  d="M153.2 292.4H877c18.8 0 35.5 10.5 43.7 27.4 8.2 16.9 6 36.5-5.6 51.3L553.2 828.5c-9.3 11.7-23.1 18.4-38.1 18.4-14.9 0-28.8-6.7-38.1-18.4L115.2 371c-11.6-14.7-13.8-34.4-5.6-51.3s24.9-27.3 43.6-27.3z m371 513.2L886 348.1c4.1-5.1 2.3-10.2 1.3-12.2-0.9-2-3.9-6.5-10.4-6.5H153.2c-6.5 0-9.5 4.6-10.4 6.5-0.9 2-2.7 7.1 1.3 12.2L506 805.6c3 3.8 7 4.4 9.1 4.4 2.1 0 6.1-0.6 9.1-4.4z"
                  fill="#595857"
                  p-id="16579"
                ></path>
              </svg>
            </div>
            <lineCharts></lineCharts>
          </el-col>
        </el-row>
      </div>
      <el-table border class="margin">
        <el-table-column type="index" label="排名"></el-table-column>
        <el-table-column label="搜索关键词"></el-table-column>
        <el-table-column sortable label="用户数"></el-table-column>
        <el-table-column sortable label="周涨幅"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import lineCharts from "@/views/dashboard/card/lineCharts";
export default {
  components: {
    lineCharts,
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.charts {
  width: 100%;
  height: 100px;
}
span {
  margin: 0;
}
.icon {
  margin-left: 10px;
}
.title {
  color: #8a8a8a;
  display: flex;
  align-items: center;
}
.count {
  display: flex;
  align-items: center;
}
.count :nth-child(2) {
  font-size: 14px;
  color: #8a8a8a;
  margin-left: 50px;
}
</style>
